<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./js/getdate.js"></script>
    <title>华为太空表盘</title>
  </head>
  <style>
    body {
      padding: 0;
      margin: 0 auto;
      font-family: "Times New Roman", Times, serif;
      color: #3b3b3b;
    }

    .box-main {
      position: absolute;
      height: 100%;
      width: 100%;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .bp-border {
      width: 800px;
      height: 800px;
      border: 15px solid #1e1e1c;
      border-radius: 50%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .middle-view {
      display: flex;
      border: 4px solid #1e1e1c;
      position: absolute;
      top: 20%;
      width: 100%;
      height: 60%;
    }

    .top-view {
      display: flex;
      position: absolute;
      top: 0%;
      width: 100%;
      height: 20%;
    }

    .top-left-view {
      width: 40%;
      height: 100%;
      border-right: 4px solid #1e1e1c;
      text-align: right;
    }

    .top-left-view > img {
      transform: rotateY(180deg);
      width: 49px;
      margin-top: 48px;
      margin-right: 15px;
    }

    .top-left-view > div {
      font-size: 47px;
      margin-top: -2px;
      margin-right: 54px;
      color: #3b3b3b;
    }

    .top-right-view {
      width: 70%;
      height: 100%;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .air-quality {
      margin-top: 16px;
      margin-left: 12px;
      font-size: 31px;
    }

    .weather-name {
      display: flex;
      margin-left: 12px;
      margin-right: 60px;
      line-height: 52px;
    }

    .weather-name > div:nth-child(1) {
      font-size: 31px;
      margin-right: 60px;
    }

    .weather-name > div:nth-child(2) {
      font-size: 36px;
    }

    .weather-name > img {
      margin-left: 2px;
      width: 50px;
    }

    .temperature {
      display: flex;
      margin-top: -2px;
      margin-left: 12px;
      margin-right: 60px;
      line-height: 52px;
    }

    .temperature > div:nth-child(1) {
      font-size: 48px;
      margin-right: 55px;
    }

    .temperature > div:nth-child(2) {
      font-size: 36px;
    }

    .temperature > img {
      width: 50px;
      margin-left: 3px;
    }

    .weather-icon > img {
      position: absolute;
      right: 152px;
      width: 87px;
      top: 67px;
    }

    .time {
      position: absolute;
      width: 100%;
      display: flex;
      justify-content: center;
      gap: 5px;
      font-size: 213px;
      margin-top: 15px;
    }

    .second {
      margin-top: 90px;
      font-size: 115px;
    }

    .date {
      position: absolute;
      top: 250px;
      width: 100%;
      display: flex;
    }

    .date-left {
      font-size: 47px;
      margin-left: 65px;
      margin-top: 68px;
    }

    .date-right {
      position: absolute;
      right: 33px;
      font-size: 45px;
    }

    .lunar-calendar {
      margin-right: 35px;
    }

    .dateandweek {
      margin-top: 20px;
    }

    .week-text {
      margin-left: -20px;
      margin-right: 34px;
    }

    .date-text {
      font-size: 45px;
    }

    .date-bottom {
      width: 100%;
      position: absolute;

      display: flex;
      font-size: 55px;
      top: 83%;
      margin-left: 100px;
    }

    .date-bottom > img {
      width: 60px;
    }

    .date-bottom > img:nth-child(1) {
      margin-right: 20px;
    }

    .bushu-img {
      margin-left: 292px;
      margin-right: 23px;
    }

    .center-tkr {
      position: absolute;
      width: 100%;
      display: flex;
      justify-content: center;
      z-index: -1;
      top: 36%;
    }

    .center-tkr > img {
      width: 480px;
      transform: rotateY(180deg);
    }

    .bottom-view {
      display: flex;
      position: absolute;
      top: 80%;
      width: 100%;
      height: 20%;
      justify-content: center;
    }

    .sleep {
      width: 30%;
      text-align: right;
    }

    .sleep > div {
      font-size: 38px;
      margin: 17px;
    }

    .bottom-number {
      width: 40%;
    }

    .bottom-number > div:nth-child(1) {
      margin-top: 6px;
      width: 100%;
      height: 46%;
      border-bottom: 4px solid #1e1e1c;
      border-right: 4px solid #1e1e1c;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 50px;
    }

    .bottom-number > div:nth-child(2) {
      width: 100%;
      height: 45%;
      border-left: 4px solid #1e1e1c;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 50px;
    }

    .distance {
      width: 30%;
    }

    .distance > div {
      margin: 17px;
      font-size: 39px;
    }
  </style>

  <body>
    <!-- 表单的整体框架 -->
    <div class="box-main">
      <!-- 表单的外边框 -->
      <div class="bp-border">
        <!-- 头部电量和天气展示栏 -->
        <div class="top-view">
          <!-- 左上角电量栏 -->
          <div class="top-left-view">
            <img src="./img/rocket-full.png" />
            <div>100%</div>
          </div>
          <!-- 右上角天气栏 -->
          <div class="top-right-view">
            <div class="air-quality">空气优质</div>
            <div class="weather-name">
              <div>多云</div>
              <div>26°</div>
              <img src="./img/sanjiaoxing_shang_o.png" />
            </div>
            <div class="temperature">
              <div>25°</div>
              <div>21°</div>
              <img src="./img/sanjiaoxing_o.png" />
            </div>
            <div class="weather-icon">
              <img src="./img/cloud.png" />
            </div>
          </div>
        </div>
        <!-- 中间时间展示栏 -->
        <div class="middle-view">
          <!-- 头部展示时间 -->
          <div class="time">
            <div class="hour">15</div>
            <div>:</div>
            <div class="minute">23</div>
            <div class="second">56</div>
          </div>
          <!-- 日期和农历 -->
          <div class="date">
            <!-- 左侧 -->
            <div class="date-left">
              <div>JavaScript</div>
            </div>
            <!-- 右侧 -->
            <div class="date-right">
              <div class="lunar-calendar">三月二十四</div>
              <div class="dateandweek">
                <span class="week-text">周三</span>
                <span class="date-text">3-24</span>
              </div>
            </div>
          </div>
          <!-- 底部心跳和步数 -->
          <div class="date-bottom">
            <img src="./img/heart-rate-full.png" />
            <div>87</div>
            <img src="./img/bushu.png" class="bushu-img" />
            <div>3299</div>
          </div>
          <!-- 中间旋转太空人 -->
          <div class="center-tkr">
            <img src="./img/tkr.gif" />
          </div>
        </div>
        <!-- 底部的睡眠和距离 -->
        <div class="bottom-view">
          <div class="sleep">
            <div>睡眠</div>
          </div>
          <div class="bottom-number">
            <div>6h55m</div>
            <div>6.5km</div>
          </div>
          <div class="distance">
            <div>距离</div>
          </div>
        </div>
      </div>
    </div>
  </body>

  <script>
    // 格式化时间
    function dateFormat(date) {
      // 格式化星期
      let weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      const config = {
        // 月份
        MM:
          date.getMonth() + 1 < 10
            ? `0${date.getMonth() + 1}`
            : date.getMonth() + 1,
        // 日
        DD: date.getDate() < 10 ? `0${date.getDate()}` : date.getDate(),
        // 时
        hh: date.getHours() < 10 ? `0${date.getHours()}` : date.getHours(),
        // 分
        mm:
          date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes(),
        // 秒
        ss:
          date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds(),
        // 星期
        week: weekday[date.getDay()],
        // 农历
        lunar: GetCNDate(),
      };
      return config;
    }
    // 小时元素
    let hourHtml = document.querySelector(".hour");
    // 分钟元素
    let minuteHtml = document.querySelector(".minute");
    // 秒元素
    let secondHtml = document.querySelector(".second");
    // 农历元素
    let lunarCalendarHtml = document.querySelector(".lunar-calendar");
    // 星期元素
    let weekTextHtml = document.querySelector(".week-text");
    // 日期元素
    let dateTextHtml = document.querySelector(".date-text");

    setInterval(() => {
      let date = new Date();
      hourHtml.innerHTML = dateFormat(date).hh;
      minuteHtml.innerHTML = dateFormat(date).mm;
      secondHtml.innerHTML = dateFormat(date).ss;
    }, 1000);
  </script>
</html>
